<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-->
  <link rel="stylesheet" href="./css/style.css">
  <title>Modern Login Page</title>
</head>
<body>
  <div class="container" id="container">
    <div class="form-container sign-up">
      <form>
        <h1>注册账号</h1>
        <div class="social-icons">
          <a href="#" class="icon">
            <i class="fa-brands fa-google-plus-g"></i>
          </a>
          <a href="#" class="icon">
            <i class="fa-brands fa-facebook-f"></i>
          </a>
          <a href="#" class="icon">
            <i class="fa-brands fa-github"></i>
          </a>
          <a href="#" class="icon">
            <i class="fa-brands fa-linkedin-in"></i>
          </a>
        </div>
        <span>使用电子邮箱注册</span>
        <input type="text" placeholder="Name">
        <input type="text" placeholder="Email">
        <input type="password" placeholder="Password">
        <button>注册</button>
      </form>
    </div>

    <div class="form-container sign-in">
      <form>
        <h1>登录</h1>
        <div class="social-icons">
          <a href="#" class="icon">
            <i class="fa-brands fa-google-plus-g"></i>
          </a>
          <a href="#" class="icon">
            <i class="fa-brands fa-facebook-f"></i>
          </a>
          <a href="#" class="icon">
            <i class="fa-brands fa-github"></i>
          </a>
          <a href="#" class="icon">
            <i class="fa-brands fa-linkedin-in"></i>
          </a>
        </div>
        <span>使用邮箱以及密码登录</span>
        <input type="text" placeholder="Email">
        <input type="password" placeholder="Password">
        <a href="#">忘记密码?</a>
        <button>登录</button>
      </form>
    </div>

    <div class="toggle-container">
      <div class="toggle">
        <div class="toggle-panel toggle-left">
          <h1>欢迎回来!</h1>
          <p>登录你的账号以使用网站的所有功能</p>
          <button class="hidden" id="login">登录</button>
        </div>

        <div class="toggle-panel toggle-right">
          <h1>你好!</h1>
          <p>注册你的账号以使用网站的所有功能</p>
          <button class="hidden" id="register">注册</button>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/script.js"></script>
</body>
</html>